import React, { memo, useMemo, useState } from "react"
import "./index.less"
import { useAppSelector } from "@/store"
import { shallowEqual } from "react-redux"
import { ArraySlice } from "@/utils/format"
import SectionHeaderV1 from "@/components/SectionHeaderV1"
import AlbumItem from "@/components/AlbumItem"
import type { Album } from "../../api/type"
const NewAlbum = () => {
	const [count, setCount] = useState<number>(0)
	const { newAlbums } = useAppSelector(
		(state) => ({
			newAlbums: state.recommend.newAlbums,
		}),
		shallowEqual,
	)
	const renderArr = useMemo(() => ArraySlice<Album>(newAlbums, 5), [newAlbums])
	const prev = () => {
		count === 0 ? setCount(renderArr.length - 1) : setCount(count - 1)
	}
	const next = () => {
		count === renderArr.length - 1 ? setCount(0) : setCount(count + 1)
	}
	return (
		<div className="newAlbumContainer">
			<SectionHeaderV1 title="新碟上架" moreLink="/discover/newdisc" />
			<div className="content">
				<button className="sprite_02 btn btnprev" onClick={prev}></button>
				<div className="albumgroup">
					{renderArr[count]?.map((it) => {
						return (
							<div className="albumImtem" key={it.id}>
								<AlbumItem data={it} />
							</div>
						)
					})}
				</div>
				<button className="sprite_02 btn btnnext" onClick={next}></button>
			</div>
		</div>
	)
}
export default memo(NewAlbum)
